<template>
  <div class="takeWorldHome">
    <div>
      <van-button @click="$router.push('/my')" type="default">我的</van-button>
      <van-button @click="$router.push('/shopCart')" type="default">购物车</van-button>
      <van-button @click="$router.push('/site')" type="default">地址</van-button>
      <van-button @click="$router.push('/orderReceiving')" type="default">接单</van-button>
      <van-button @click="$router.push('/assignDriver')" type="default">指派司机</van-button>
      <van-button @click="$router.push('/paySuccess')" type="default">支付成功</van-button>
      <van-button @click="$router.push('/payUnusual')" type="default">支付异常</van-button>
      <van-button @click="$router.push('/payBreak')" type="default">支付失败</van-button>
      <van-button @click="$router.push('/payWait')" type="default">待审核</van-button>
      <van-button @click="$router.push('/shopHome')" type="default">店铺首页</van-button>
      <van-button @click="$router.push('/shoppingList')" type="default">商品列表</van-button>
      <van-button @click="goaClassify" type="default">一级分类</van-button>
    </div>
    <div class="takeWorldHomeNavBar">
      <van-nav-bar title="花世界" :border="false">
        <template #right>
          <van-icon
            name="search"
            color="black"
            size="25"
            @click="$router.push(`/search?id=${ClassifyTab.id}`)"
          />
        </template>
      </van-nav-bar>
    </div>
    <van-pull-refresh :value="true" animation-duration="200" success-text="刷新成功">
      <div class="takeWorldHomeTab">
        <van-tabs v-model="active" color="#00BF42" title-active-color="black" :border="false">
          <van-tab title="推荐"></van-tab>
          <van-tab
            :title="ClassifyTab.categoryName"
            v-for="(ClassifyTab,ifytab) in ClassifyTab"
            :key="ifytab"
          ></van-tab>
        </van-tabs>
      </div>
      <div class="takeWorldHomeSwiper">
        <van-swipe @change="onChange" autoplay="3000">
          <van-swipe-item v-for="(swiper,i) in swiper" :key="i">
            <a :href="swiper.url">
              <img :src="swiper.pic" />
            </a>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/{{ swiper.length }}</div>
          </template>
        </van-swipe>
      </div>
      <div class="takeWorldHomeClassify">
        <van-grid icon-size="33" :border="false">
          <van-grid-item
            icon=""
            text="鲜花行情"
          />
          <van-grid-item
            @click="goOnlineAuction"
            icon="https://lanhu.oss-cn-beijing.aliyuncs.com/ps2ce93050d6c010d5-8c79-45c8-bbca-dc83a153db2d"
            text="在线拍卖"
          />
          <van-grid-item
            @click="goPurchase"
            icon=""
            text="在线竞标"
          />
          <van-grid-item
            @click="$router.push('/provider')"
            icon=""
            text="认证商家"
          />
        </van-grid>
      </div>
      <div class="takeWorldHomeInform" v-for="(Information,infor) in Information" :key="infor">
        <van-notice-bar
          :text="Information.title"
          left-icon="volume-o"
          mode="link"
          @click="goAdvisory"
        />
      </div>
      <div class="takeWorldHomeLowprice">
        <div class="takeWorldHomeLowpriceHand">
          <img src="../../assets/images/time.png" />
          <span class="takeWorldHomeLowpriceHandTitle">特价促销</span>
          <van-count-down :time="time" class="takeWorldHomeLowpriceHandTimeout">
            <template v-slot="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
          <span class="takeWorldHomeLowpriceHandslogan" @click="goLowprice">数量有限，抢到就是赚到</span>
        </div>
        <div class="takeWorldHomeLowpriceButtom">
          <van-swipe :loop="false" :width="116" :show-indicators="false">
            <van-swipe-item
              v-for="(commodity,com) in commodity"
              :key="com"
              class="takeWorldHomeLowpricefor"
              @click="$router.push(`/goodsDetail?id=${commodity.id}&productType=3`)"
            >
              <img :src="commodity.mainPic" class="shoppingImage" />
              <p class="takeWorldHomeLowpriceButtomTitle">{{commodity.productName}}</p>
              <span class="takeWorldHomeLowpriceButtomOnsale">月售:{{commodity.salesVolume}}</span>
              <span class="takeWorldHomeLowpriceButtomOnlysell">仅售:{{commodity.productStock}}</span>
              <p class="takeWorldHomeLowpriceButtomPrice">￥{{commodity.productPrice}}元</p>
              <img src="../../assets/images/add.png" class="shppingAdd" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="takeWorldHomeGroup">
        <div class="takeWorldHomeGroupHand">
          <span class="takeWorldHomeGroupHandTitle">团购</span>
          <span class="takeWorldHomeGroupHandslogan" @click="goGroupbuying">团的越多赚得越多</span>
        </div>
        <div class="takeWorldHomeGroupBottom">
          <div class="groupGoods">
            <div
              class="shoppingShow"
              v-for="(item,group) in groupGoods"
              :key="group"
              @click="$router.push(`/goodsDetail?id=${item.id}&productType=2`)"
            >
              <goodsComponent :addGoods="item" />
            </div>
          </div>
          <!-- <groupGoods :groupGoods="groupGoods"></groupGoods> -->
        </div>
      </div>
      <div class="advertising">
        <img src="../../assets/images/gg.png" />
      </div>
      <div class="takeWorldHomeGroupAdd">
        <div class="takeWorldHomeAddHand">
          <span class="takeWorldHomeGroupAddTitle">今日推荐</span>
          <span class="takeWorldHomeGroupAddslogan">更多</span>
        </div>
        <div class="takeWorldHomeAddBottom">
          <van-list
            :immediate-check="false"
            :offset="10"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="pullLoad"
          >
            <div v-for="(item, i) in recommend" :key="i">
              <goodsComponent :addGoods="item" />
            </div>
          </van-list>
          <!-- <auctionGoods :auctionGoods="recommend"></auctionGoods> -->
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import groupGoods from "../../components/groupGoods";
import auctionGoods from "../../components/auctionGoods";
import { shoppingService } from "@/api";
export default {
  name: "home",
  data() {
    return {
      recommend: false,
      loading: false,
      finished: false,
      active: 0,
      current: 0,
      time: 30 * 60 * 60 * 1000,
      swiper: [],
      Information: [],
      ClassifyTab: [],
      commodity: [],
      groupGoods: [],
      auctionGoods: [],
      recommend: [],
      total: 0,
      param: {
        page: 1,
        pageSize: 10
      }
    };
  },

  created() {
    this.asgetSlideAdvers();
    this.asgetClassifyTab();
    this.asgetInformation();
    this.asgetShopList();
    this.asgetspecialList();
    this.asgetRecommend();
  },

  methods: {
    // 前往资讯详情
    goAdvisory() {
      this.$router.push({
        path: "/advisory",
        query: { id: this.Information[0].id }
      });
      console.log(this.Information[0].id);
    },
    // 获取广告列表
    async asgetSlideAdvers() {
      const { data } = await shoppingService.getSlideAdvers(1);
      console.log(data, "轮播图");
      this.swiper = data;
    },
    // 获取分类列表
    async asgetClassifyTab() {
      const { data } = await shoppingService.getClassifyTab(0);
      console.log(data, "分类");
      this.ClassifyTab = data;
    },
    // 获取资讯
    async asgetInformation() {
      const { data } = await shoppingService.getInformation();
      console.log(data, "资讯");
      this.Information = data;
    },
    // 商品团购表
    async asgetShopList(){
      const { data } = await shoppingService.getShopList(1,10,2,0,1);
      console.log(data,"团购列表")
      this.groupGoods = data.list;
    },
    // 商品特价列表
    async asgetspecialList(){
      const { data } = await shoppingService.getspecialList(1,4,3,0,1);
      console.log(data,"特价列表")
      this.commodity = data.list
    },
    // 获取今日推荐列表
    async asgetRecommend(){
      const { data } = await shoppingService.getRecommend(this.param);
      console.log(data,"今日推荐")
      this.recommend = data.list;
       this.loading = false
    },

    // 上拉分页
    pullLoad() {
      this.param.page = this.param.page + 1;
      this.finished =
        this.total <= this.param.page * this.param.pageSize;
      this.asgetRecommend();
    },

    // 轮播图
    onChange(index) {
      this.current = index;
    },
    // 前往搜索页
    goSearch() {
      this.$router.push({
        path: "/search",
        query: { id: this.ClassifyTab.id }
      });
    },
    // 前往商品列表
    goShoppingList() {
      this.$router.push({ path: "/shoppingList" });
    },
    // 前往一级分类
    goaClassify(){
      this.$router.push({
        path: "/aClassify",
        query:{ id: this.ClassifyTab.id }
        });
    },
    // 前往团购页
    goGroupbuying() {
      this.$router.push({
        path: "/groupbuying",

      });
    },
    // 前往特价促销
    goLowprice() {
      this.$router.push({
        path: "/lowPrice",

      });
    },
    // 前往在线拍卖
    goOnlineAuction() {
      this.$router.push({ path: "/onlineAuction" });
    },
    // 前往在线竞标
    goPurchase() {
      this.$router.push({ path: "/purchase" });
    },
    // 前往商品录入
    gospgentering() {
      this.$router.push({ path: "/spgentering" });
    }
  },
  components: {
    groupGoods,
    auctionGoods
  }
};
</script>

<style lang='scss' scoped>
.shoppingShow {
  width: 100%;
  display: flex;
  margin-top: 10px;
  background-color: #fff;
}
* {
  overflow-x: hidden;
  overflow-y: hidden;
}
.takeWorldHome {
  background-color: rgba(247, 249, 252, 1);
}
.takeWorldHomeNavBar {
}
.takeWorldHomeTab {
  background-color: #fff;
}
.takeWorldHomeSwiper {
  margin-top: 10px;
  width: 100%;
  text-align: center;
  background-color: #fff;
}
.takeWorldHomeSwiper img {
  width: 95%;
  height: 155px;
}
.custom-indicator {
  position: absolute;
  right: 15px;
  bottom: 15px;
  padding: 2px 5px;
  font-size: 15px;
  background-color: #69413e;
  color: #fff;
  border-radius: 20px;
}
.takeWorldHomeLowprice {
  background-color: #fff;
  padding: 10px;
}
.takeWorldHomeLowpriceHand {
  margin-left: 20px;
  width: 100%;
}
.takeWorldHomeLowpriceHand img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.takeWorldHomeLowpriceHandTitle {
  font-size: 16px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  vertical-align: middle;
}
.takeWorldHomeLowpriceHandslogan {
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
  margin-left: 32px;
}
.takeWorldHomeLowpriceHandTimeout {
  display: inline;
  vertical-align: middle;
}
.colon {
  display: inline-block;
  color: #ff586d;
}
.block {
  display: inline-block;
  width: 20px;
  color: #fff;
  font-size: 15px;
  text-align: center;
  background-color: #ff586d;
  border-radius: 5px;
}
.takeWorldHomeLowpriceButtom {
  overflow-x: hidden;
  margin-top: 20px;
}
.takeWorldHomeLowpricefor {
  margin: 0 15px;
}
.shoppingImage {
  width: 116px;
  height: 116px;
  vertical-align: middle;
}
.takeWorldHomeLowpriceButtomTitle {
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  vertical-align: middle;
}
.takeWorldHomeLowpriceButtomOnsale {
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
}
.takeWorldHomeLowpriceButtomOnlysell {
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
}
.takeWorldHomeLowpriceButtomPrice {
  font-size: 18px;
  font-weight: bold;
  color: rgba(255, 98, 0, 1);
  display: inline;
}
.takeWorldHomeLowpriceButtomOgl {
  font-size: 10px;
  font-weight: 500;
  text-decoration: line-through;
  color: rgba(169, 174, 192, 1);
}
.shppingAdd {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-left: 7px;
}
.takeWorldHomeGroup {
  margin-top: 21px;
}
.takeWorldHomeGroupHandTitle {
  font-size: 15px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-left: 15px;
}
.takeWorldHomeGroupHandslogan {
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
  margin-left: 211px;
}
.advertising {
  width: 100%;
  margin-top: 21px;
  text-align: center;
}
.advertising img {
  width: 90%;
}
.takeWorldHomeGroupAdd {
  margin-top: 18px;
}
.takeWorldHomeGroupAddTitle {
  font-size: 15px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-left: 15px;
}
.takeWorldHomeGroupAddslogan {
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
  margin-left: 251px;
}
</style>
